<template>
  <div class="container">
    <div class="directorys-container">
      <el-card class="box-card">
        <!-- 搜索部分，新增部分 -->
        <el-row type="flex">
          <el-col :span="18">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="目录名称" label-width="80px" size="small">
                <el-input v-model="directoryName"></el-input>
              </el-form-item>
              <el-form-item label="状态" label-width="80px" size="small">
                <el-select v-model="state" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item size="small">
                <el-button size="small" @click="clearSearch">清除</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="onSearch"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button v-if="subjectID !== undefined" type="text" @click="$router.back()">
              <i class="el-icon-back"></i>
              <span>返回学科</span>
            </el-button>
            <el-button type="success" size="small" @click="showDialog = true">
              <i class="el-icon-edit"></i>
              <span>新增目录</span>
            </el-button>
          </el-col>
        </el-row>
        <!-- 数据条数统计 -->
        <el-row style="margin-bottom: 15px">
          <el-alert
            :title="`数据一共 ${total}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-row>
        <!-- 目录表格 -->
        <el-row>
          <el-table :data="tableData" style="width: 100%" show-header>
            <el-table-column type="index" label="序号" width="80px">
            </el-table-column>
            <el-table-column prop="subjectName" label="所属学科">
            </el-table-column>
            <el-table-column prop="directoryName" label="目录名称">
            </el-table-column>
            <el-table-column prop="username" label="创建者"> </el-table-column>
            <el-table-column prop="addDate" label="创建日期"> </el-table-column>
            <el-table-column prop="totals" label="面试题数量">
            </el-table-column>
            <el-table-column prop="states" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state === 1"> 已启用 </span>
                <span v-else> 已禁用 </span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="text" @click="switchState(row)">{{
                  row.state === 1 ? "禁用" : "启用"
                }}</el-button>
                <el-button
                  type="text"
                  :disabled="row.state === 1"
                  @click="editDirectory(row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  :disabled="row.state === 1"
                  @click="delDirectory(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 分页 -->
        <el-row
          v-if="subjectID === undefined"
          style="margin-top: 20px; text-align: right"
        >
          <el-col><el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :page-size="query.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination></el-col>
        </el-row>
        <!-- 新增/修改弹出框 -->
      </el-card>
    </div>
    <directorysAdd ref="directoryRef" :show-dialog.sync="showDialog" :subject-i-d="subjectID"></directorysAdd>
  </div>
</template>

<script>
import { changeState, list, detail, remove } from '../../api/hmmm/directorys'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    directorysAdd
  },
  data() {
    return {
      showDialog: false,
      subjectID: this.$route.query.id,
      subjectName: this.$route.query.name,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      query: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      switchStates: false,
      state: undefined,
      directoryName: ''
    }
  },
  created() {
    // 在一开始获取表格数据
    this.getTableDate()
  },
  methods: {
    async getTableDate() {
      const query = this.subjectID ? { ...this.query, subjectID: this.subjectID } : { ...this.query }
      // 获取表格数据
      const { data } = await list(query)
      this.tableData = data.items
      this.total = data.counts
    },
    async handleSizeChange(val) {
      // 页数发生改变时请求不同页数的数据
      this.query.pageSize = val
      this.getTableDate()
    },
    async handleCurrentChange(val) {
      this.query.page = val
      // 点击页码根据页数发送页面数据请求
      this.getTableDate()
    },
    async switchState(val) {
      // 开启节流
      this.switchStates = true
      // 发送修改状态请求
      await changeState({
        id: val.id,
        state: val.state
      })
      // 点击状态切换时在0和1之间来回切换
      val.state = val.state === 1 ? 0 : 1
      this.$message.success('操作成功')
      // 关闭节流
      this.switchStates = false
    },
    clearSearch() {
      this.directoryName = ''
      this.state = undefined
    },
    onSearch() {
      if (this.state) {
        this.query.state = this.state
      } else {
        delete this.query.state
      }
      if (this.directoryName !== '') {
        this.query.directoryName = this.directoryName
      } else {
        delete this.query.directoryName
      }
      this.getTableDate()
      console.log(this.query)
    },
    async editDirectory(id) {
      // 弹出框弹出
      this.showDialog = true
      // 获取目标目录详情
      const { data } = await detail({ id: id })
      // 表单回显
      this.$refs.directoryRef.form.subjectID = data.subjectID
      this.$refs.directoryRef.form.directoryName = data.directoryName
      this.$refs.directoryRef.form.id = data.id
    },
    delDirectory(id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove({
          id: id
        })
        this.$message.success('删除成功')
        this.getTableDate()
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang='scss'>
.directorys-container {
  padding: 10px;
  ::v-deep(.el-table th) {
    background-color: #fafafa;
    &.is-leaf {
      border-bottom: 2px solid #e8e8e8;
    }
  }
}
</style>
